<script setup lang="ts">
import { TURNOVER, ABNORMAL_TOP, page, TabType } from "./scripts/tabList";
import { tabKeys } from "./scripts/tabList";
import { URL_ABNORMAL_TOP_TURNOVER } from "@/comm/api";
import { computed, onMounted, ref, watch } from "vue";
import { get } from "@/comm/request";
import { formatBigNumber } from "@/comm/format";
import { commFun } from "./scripts/tabList";
import jNumber from "@/components/j-number/index.vue";
import jString from "@/components/j-string/index.vue";
import Empty from "@/components/j-empty/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import i18n from "@/locals";

const key = ref(tabKeys.tab3_key);
// const navs = ['# 代币', '价格(5min chg%)', '交易额', '时间'];
const navs = [
    "#",
    i18n.global.t("message.TabC.a"),
    i18n.global.t("message.TabC.b"),
    i18n.global.t("message.TabC.c")
    // i18n.global.t('message.TabC.d'),
];

const loding = ref(true);

const ListArr = ref<TURNOVER[]>([]);

//分页拿取请求回来的数据
const idx = ref(1);
const sum = page.sum; //9
const listArr_ = computed(() => ListArr.value.slice((idx.value - 1) * sum, idx.value * sum));

const getdate = async function () {
    console.log(key.value.value, "key.value.value")
    loding.value = true;
    const res: ABNORMAL_TOP<TURNOVER> = await get(URL_ABNORMAL_TOP_TURNOVER, { periodType: key.value.value });

    if (res.success) {
        ListArr.value = [];
        setTimeout(() => {
            loding.value = false;
            ListArr.value = res.data;
            idx.value = 1;
        }, 500);
        // console.log('yzt 表格c 求回的数据', res);
    } else {
        console.log('<span style="color:red">数据错误</span>', res);
        loding.value = false;
    }
};

watch(()=>key.value, () => getdate());
onMounted(() => {
    getdate();
    // console.log('yzt', listArr_);
});
</script>

<template>
    <JLoding v-if="loding"></JLoding>
    <div class="tab">
        <VRow class="nvas c-title-5 px-5">
            <VCol v-for="(item, idx) in navs" :class="`col${idx}`" :cols="commFun.getIdx(TabType.TabC, idx)" :key="idx">
                <p class="navs_title">{{ item }}</p>
            </VCol>
        </VRow>
        <div class="bdy pt-3 overflow-y-hidden overflow-x-hidden">
            <Empty v-if="listArr_.length === 0"></Empty>
            <VRow class="c-title-4 px-5" v-for="(item, idx_) in listArr_">
                <VCol :cols="commFun.getIdx(TabType.TabC, 0)" class="col0">
                    <!-- <span style="color: var(--color);">{{ commFun.getItemidx((idx_ + 1), idx, sum) }}</span> -->
                    <span style="color: var(--color)">{{ idx_ + 1 }}</span>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabC, 1)" class="col1 d-flex">
                    <img :src="commFun.getIconByHash(item.baseToken)" class="mr-2" />
                    <span class="y-link" @click="commFun.openToken(item.baseToken)"><jString :text="item.symbol" bold></jString></span>&nbsp;&nbsp;
                    <jString :text="item.name" color="var(--color)"></jString>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabC, 2)" class="col2"> <jNumber :num="item.baseTokenPriceUsd" prefix="$" origin notbold is-color price></jNumber>&nbsp; </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabC, 3)" class="col3">
                    <!-- <span class="c-bold">${{ formatBigNumber(item.reserveInUsd) }}</span>&nbsp; -->
                    <jNumber :num="item.volumeUsdH24" prefix="$" :origin="true" :notbold="true" price></jNumber>&nbsp;
                    <!-- <span :class="getColor(getDateB(item)!)"> {{ formatBigNumber(getDateB(item)) }}</span> -->
                    <!-- <jNumber :num="key.value === 'H' ? item.priceChangeH1 : item.priceChangeH24" :is-color="true"></jNumber> -->
                </VCol>
            </VRow>
        </div>
        <!-- <v-pagination :length="Math.ceil(ListArr.length / sum)" :total-visible="3" v-model="idx"></v-pagination> -->
    </div>
</template>

<style lang="less" scoped>
// .token {
//     display: flex;
//     span {
//         width: 40px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//     }

//     span:nth-child(2) {
//         margin-left: 2px;
//         text-align: right;
//     }
// }

.bdy {
    margin-top: 13px;
    // height: 470px !important;
    // background-color: orange;
    .v-row {
        height: 45px;
    }
}

// .col0 {
//     max-width: 10px !important;
// }
.col1 {
    // width: 40%;
    // border: solid 1px #f0f0f0;
    overflow: hidden;
}
.col2 {
    // padding-right: 80px;
    margin-left: 20px;
    text-wrap: nowrap;
    text-align: right;
    // border: solid 1px #a05e5e;
}

.col3 {
    // position: absolute;
    // right: 2%;
    // text-wrap: nowrap;
    text-align: right;
    // width: 30%;
    // border: solid 1px #f0f0f0;
}

.v-col:nth-child(2) {
    text-align: left;

    .p_ {
        // color: red;
        font-size: 14px;
    }

    .span_ {
        font-size: 12px;
    }
}

// .v-col:nth-child(3) {
//     text-align: right;
// }

// .v-col:last-child {
//     text-align: right;
// }
</style>
